<template>
  <div>
    <puplic-modal
      width="560px"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="cancel"
      @handleOk="handleOk"
      :title="title"
    >
      <div slot="content">
        <a-form-model :model="form" ref="form" class="formStyle" autocomplete="off" layout="inline" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="单位名称" prop="unitName">
                <a-input placeholder="请输入单位名称" :maxLength="30" v-model.trim="form.unitName" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="上级机关" prop="parentName">
                <a-input placeholder="请选择上级区域" v-model.trim="form.parentName" :disabled="true" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24" v-if="record.type == 1">
            <a-col :span="24">
              <a-form-model-item label="选择区县" prop="regionId">
                <a-select ref="select" v-model="form.regionId" style="width: 100%" placeholder="请选择区县">
                  <a-select-option v-for="(item, index) in regionIdList" :key="index" :value="item.id">
                    {{ item.regionName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24" v-if="record.type == 2">
            <a-col :span="24">
              <a-form-model-item label="管辖街道">
                <a-checkbox-group v-model="checkboxRegionIdList">
                  <a-checkbox :key="index" :value="item.id" v-for="(item, index) in regionIdList">
                    {{ item.regionName }}
                  </a-checkbox>
                </a-checkbox-group>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="4">
            <a-col :span="22">
              <a-form-model-item label="经度">
                <a-input placeholder="例如104.123456" v-model.trim="form.lat" />
              </a-form-model-item>
            </a-col>
            <a-col :span="2">
              <img
                @click="showMap"
                class="select-map-img cursor"
                style="width: 36px; height: 36px"
                src="@/assets/imgs/system/in-map.png"
              />
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="纬度">
                <a-input placeholder="例如34.865432" v-model.trim="form.lng" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </puplic-modal>
    <a-map :visible.sync="isShowMap" @border="getBorder" @getLatLong="getLatLong" ref="aMap"></a-map>
  </div>
</template>
<script>
import { uploadFile, unitAdd } from '@/api/api'
import { getAction } from '@/api/manage'
import { commitTrim } from '@/utils/util'
import AMap from '@/components/a-map/index.vue'
import puplicModal from '@/components/publicModal'
export default {
  components: { puplicModal, AMap },
  name: '',
  data() {
    return {
      title: '新增单位',
      form: {},
      rules: {
        unitName: [{ required: true, message: '请输入单位名称!' }],
        parentName: [{ required: true, message: '请选择上级区域名称!' }],
        regionId: [{ required: true, message: '请选择区县!', trigger: 'change' }],
        lng: [{ required: true, message: '请输入纬度!' }],
        lat: [{ required: true, message: '请输入经度!' }],
      },
      record: {},
      publicVisible: false,
      // regionId: '',
      regionIdList: [],
      checkboxRegionIdList: [],
      isShowMap: false,
    }
  },
  mounted() {},
  methods: {
    add(records) {
      this.form = { ...records }
      this.record = records
      this.getTargetInitList(records.parentId)
      this.fileList = []
      this.publicVisible = true
    },

    async getTargetInitList(unitId) {
      let { result } = await getAction('/sys/region/find_sub_region_list', { unitId })
      this.regionIdList = result
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }

      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 13)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },
    uploadChange({ file, fileList }) {
      if (this.isLt2M) {
        file.status = 'done'
        this.fileList = fileList
      }
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        if (this.form.lat == null || this.form.lat == '') {
          this.$message.error('经度不能为空,请选择经纬度')
          return
        }
        if (this.form.lng == null || this.form.lng == '') {
          this.$message.error('纬度不能为空,请选择经纬度')
          return
        }
        if (this.record.type == 1) {
          let regionIdList = []
          regionIdList.push(this.form.regionId)
          this.form.regionIdList = regionIdList
        } else if (this.record.type == 2) {
          this.form.regionIdList = this.checkboxRegionIdList
        }
        unitAdd(this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success('新增成功!')
            this.$emit('ok')
            this.cancel()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    cancel() {
      this.publicVisible = false
      // this.regionId = ''
      this.regionIdList = []
      this.checkboxRegionIdList = []
      this.form = {}
    },

    // ! 地图方法开始
    showMap() {
      this.isShowMap = true
    },
    getLatLong(value) {
      this.form.lat = value[0]
      this.form.lng = value[1]
    },
    getBorder(value) {
      this.form.areaPosition = value
    },
    createBorderLine() {
      this.$refs.aMap.borderLine = true
      this.isShowMap = true
    },
    // ! 地图方法结束
  },
}
</script>
<style scoped lang="less">
/deep/ .ant-form-item-control-wrapper {
  overflow: auto;
}
/deep/ .content {
  padding: 20px;
}
/deep/ .ant-checkbox-wrapper {
  color: #04b6c0;
}
</style>
